<template>
  <panel title="供配电异常监控">
    <div class="ml20 mr20 failure-statistic">
      <div class="total" v-animated-number="12"></div>
      <pie :width="chartWidth" :height="chartHeight" :options="chartOptions"></pie>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'DeviceAlert',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      chartOptions: null
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.chartOptions = {
        title: {
          text: '当前故障数',
          x: 'center',
          bottom: 10,
          textStyle: {
            color: '#999',
            fontSize: 12,
            fontWeight: 'normal'
          }
        },
        series: [{
          radius: ['40%', '60%'],
          center: ['50%', '45%'],
          data: [
            {value: 6, name: '2栋变电房'},
            {value: 25, name: '3栋变电房'}
          ]
        }]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/common'

.failure-statistic {
  position: relative;

  .total {
    absolute: left top 45%;
    margin-top: -20px;
    size: 100% 40px;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
  }
}
</style>
